﻿<html>
<head>
<title>CSS3 Box Shadow Test</title>

<style type="text/css">
body {box-shadow: 10px 20px 30px; border-style: solid;}
p {box-shadow: blue; border-style: solid; 
  }
h3 {box-shadow: 10px 10px 10px blue; border-style: solid;}
h4 {box-shadow: 5em lime; border-style: solid;}
em {box-shadow: 10em 20em yellow; border-style: solid;}
</style>
</head>

<body>




<h1>CSS3 Box Shadow Test</h1>





<ul>
<li >
For "box-shadow", possible values are 
"none | [ <length> <length> <length>? || <color> ] [ , <length> <length> <length>? || <color> ]"
</li>
</ul>
<h2>
PASS CRITERIA:
</h2>
NOTE: This property may not be implemented yet.
<p>
If statement above is true, this paragraph should have a blue
box shadow (omitted lengths are all 0).
The rule applied is "p {box-shadow: blue;}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</p>
<h3>
The box-shadow of this h3 heading should be 10px 10px 10px blue.  
The rule applied is "h3 {box-shadow: 10px 10px 10px blue;}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</h3>
<h4>
The box-shadow of this h4 heading should be 5em lime.
The rule applied is "h4 {box-shadow: 5em lime;}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</h4>
<em>
This emphasized test should have a box shadow of 10em 20em yellow.
The rule applied is "em {box-shadow: 10em 20em yellow;}".
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
Here is more text to test this more effectively.
</em>
<p>
All other properties of this page should be UA-default.
This is a paragraph, like the one above, so should also
have blue box shadow.  The body's box shadow of 10px 20px 30px (UA-default color) should display,
since the rule "body {box-shadow: 10px 20px 30px;}" applies.
Border style of solid is applied to all
CSS rules, so that the border is visible.
</p>

</body>
</html>
